<template>
  <div class="aside tree-container">
    <div class="first-tree">
      <span>思政体系</span>
      <el-button
        class="add"
        @click="append()"
        type="custom"
        plain
        size="mini"
        v-if="$button('757')"
        >新增</el-button
      >
    </div>
    <el-tree
      class="tree filter-tree"
      :data="data"
      :props="defaultProps"
      node-key="id"
      accordion
      :expand-on-click-node="false"
      @node-click="handleNodeClick"
      :default-expanded-keys="expandedIds"
    >
      <span class="custom-tree-node" slot-scope="{ node, data }">
        <span class="label-name" :title="node.label"> {{ node.label }}</span>
        <span class="btns">
          <el-button
            type="text"
            size="mini"
            style="color: var(--colorA1)"
            icon="el-icon-plus"
            title="新增"
            @click="() => append(data)"
            v-if="data.nature != 3 && node.level < 6 && $button('757')"
          ></el-button>
          <el-button
            type="text"
            size="mini"
            icon="el-icon-minus"
            style="color: var(--colorA1)"
            title="删除"
            v-if="$button('758')"
            @click="() => remove(node, data)"
          ></el-button>
          <el-button
            type="text"
            size="mini"
            style="color: var(--colorA1)"
            icon="el-icon-edit"
            title="编辑"
            v-if="$button('759')"
            @click="() => edit(data)"
          ></el-button>
        </span>
      </span>
    </el-tree>
    <TreeAdd :data="data" />
  </div>
</template>
<script>
import { sysIdeologicalEducationQuery } from '@/api/admin/system/sysIdeologicalEducation.js'
import TreeAdd from './TreeAdd.vue'
import { TreeDelete } from '../mixins/TreeDelete'
import Bus from '@/utils/bus.js'
export default {
  mixins: [TreeDelete],
  components: {
    TreeAdd,
  },
  data() {
    return {
      defaultProps: {
        children: 'childList',
        label: 'name',
      },
      listQuery: {
        type: 1,
      },
      data: [],
      expandedIds: [],
    }
  },
  mounted() {
    this.getTree()
    Bus.$on('refreshList_EducationTree', (v) => {
      if (v) {
        Object.assign(this.listQuery, v)
      }
      this.getTree()
    })
  },
  beforeDestroy() {
    Bus.$off('refreshList_EducationTree')
  },
  methods: {
    getTree() {
      sysIdeologicalEducationQuery(this.listQuery).then((res) => {
        this.data = res.data.data
        this.data.forEach((item) => {
          item.childList.forEach((_item, index, arr) => {
            arr[index].childList = []
          })
        })
        this.expandedIds = [this.data[0].id]
      })
    },
    handleNodeClick(data) {
      // if (data.type != 2) return;
      Bus.$emit('refreshList_EducationContent', { id: data.id })
    },
    //添加节点
    append(data) {
      Bus.$emit('showAddDialog_TreeAdd', { type: 'add', data })
    },
    //编辑节点
    edit(data) {
      Bus.$emit('showAddDialog_TreeAdd', { type: 'edit', data })
    },
  },
}
</script>
<style scoped>
.aside {
  line-height: 26px;
  height: 740px;
  text-align: left;
  font-size: 14px;
}
.aside::-webkit-scrollbar {
  display: none;
}
.custom-tree-node {
  border-bottom: 0 none;
  display: block;
  width: 100%;
}
.label-name {
  float: left;
  max-width: 180px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.btns {
  float: right;
  padding-right: 10px;
}
.aside >>> .el-tree-node__content {
  padding-bottom: 0;
  padding-top: 5px;
  padding-bottom: 5px;
}
.first-tree {
  height: 28px;
  padding: 14px 10px;
  line-height: 28px;
  border-bottom: 1px solid #eee;
}
.first-tree .add {
  float: right;
}
.aside >>> .el-tree-node.is-current {
  background: #f5f7fa;
}
</style>